<template>
  <page-wrap stay-still back hide-tab title="自我评价">
    <view class="evaluation" :style="'margin-bottom:' + inputBottom + 'px;'">
      <view class="evaluation-wrap" @touchmove.stop.prevent="doNothing">
        <my-textareac
          class="form-text"
          :value.sync="evalText"
          :maxlength="1000"
          placeholder="请输入自我评价"
          auto-height
          show-word-limit
          @board-change="handleBottom"
        ></my-textareac>

        <!-- <u-input
          v-model="evalText"
          class="textarea"
          type="textarea"
          height="260"
          maxlength="1000"
          placeholder="请输入自我评价"
        />
        <view class="evaluation-words">{{ remainingWords }} 字</view> -->
      </view>
    </view>
    <view class="page-action">
      <view class="btn-save">
        <u-button type="primary" :custom-style="btnStyle" @click="handleSave"
          >保存</u-button
        >
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { updatePersonDetail, getResumeData } from "@/api/index";
import MyTextareac from "../components/MyTextareac.vue";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  components: {
    MyTextareac,
  },
  data() {
    return {
      textareaActiveHeight: "",
      inputBottom: 0,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      evalText: null,
      btnSaveStyle: {
        border: "none",
        backgroundColor: "#E9ECEF",
      },
      btnStyle: {
        border: "none",
      },
    };
  },
  // computed: {
  //   remainingWords() {
  //     return 1000 - (this.evalText && this.evalText.length);
  //   },
  // },
  watch: {
    inputBottom(val) {
      if (val) {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 99999,
            duration: 0,
          });
        });
      }
    },
  },
  created() {
    this.getResumeData();
  },
  // onShareAppMessage() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  // onShareTimeline() {
  //   return {
  //     title: this.$selfName,
  //     path: "/pages/index/index",
  //   };
  // },
  methods: {
    getCharCount(str, char) {
      var regex = new RegExp(char, "g"); // 使用g表示整个字符串都要匹配
      var result = str.match(regex); //match方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
      var count = !result ? 0 : result.length;
      return count;
    },
    doNothing() {},
    handleBottom(e) {
      this.inputBottom = e > 146 ? e - 146 : 0;
    },
    getResumeData() {
      if (
        !getApp().globalData.resumeInfo ||
        !getApp().globalData.resumeInfo.id
      ) {
        let param = {
          personId: this.personId,
          conditionArr: JSON.stringify({
            is_mp: 1,
          }),
        };
        getResumeData(param).then((res) => {
          this.evalText = res.Grzz_p;
          console.log("this.evalText111", this.evalText);
          this.getCharCount(this.evalText, "<br />");
          this.textareaActiveHeight = count * 40 + "rpx";
        });
      } else {
        this.evalText = getApp().globalData.resumeInfo.Grzz_p;
        console.log("this.evalText222", this.evalText);
        let count = this.getCharCount(this.evalText, "<br />");
        this.textareaActiveHeight = count * 40 + "rpx";
      }
    },
    handleSave() {
      let params = {};
      var updatalist = {};
      updatalist.where = "id='" + this.personId + "'";
      updatalist.personId = this.personId;
      var update = [];
      update.push({
        columnName: "grzz",
        columnValue: this.evalText,
      });
      updatalist.update = update;
      params.param = JSON.stringify(updatalist);
      updatePersonDetail(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            icon: "none",
            title: "修改成功",
            complete() {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            },
          });
        } else {
          uni.showToast({ icon: "none", title: res.status_desc });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.evaluation {
  flex-grow: 1;
  padding: 32rpx;

  .evaluation-wrap {
    padding: 32rpx 32rpx 20rpx;
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-big;
    ::v-deep .form-text {
      display: block;
      width: calc(100vw - 128rpx);
      box-sizing: border-box;
      .textarea-input {
        background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
        textarea,
        .textarea {
          // height: 260rpx !important;
          // height: 520rpx !important;
          overflow-y: scroll;
          font-size: $uni-font-size-sm;
        }
        .placeholder {
          font-size: $uni-font-size-sm;
        }
      }
    }
    ::v-deep .textarea {
      background-color: #f8f9fb;
      border-radius: $uni-border-radius-big;
      .u-input {
        background-color: #f8f9fb;
        border-radius: $uni-border-radius-big;
      }
    }
    ::v-deep .u-input__textarea {
      padding: 24rpx 32rpx;
      font-size: $uni-font-size-nor;
    }

    .evaluation-words {
      margin: 20rpx;
      text-align: right;
      color: $uni-text-color-888;
      font-size: $uni-font-size-sm;
    }
  }
}
</style>
